<script setup lang="ts">
import { useAppStore } from '@/store/modules/app'
import { computed,ref } from 'vue'
import { useDesign } from '@/hooks/web/useDesign'
import VersionForm from '@/views/Login/components/VersionForm.vue'
import {Dialog} from '@/components/Dialog';
import {ElButton} from 'element-plus';

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('footer')

const appStore = useAppStore()
// const date = new Date().getFullYear()
const title = computed(() => appStore.getTitle)
const titleStr=title.value.substring(title.value.length-15,title.value.length)
const versionCode=computed(() => appStore.getVersionCode)

const isShowVersion=ref(false)
const showVersion=()=>{
  isShowVersion.value=true
}
</script>

<template>
  <div
    :class="prefixCls"
    class="text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-contnet-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)] dark:bg-[var(--el-bg-color)]"
    style="font-size: 12px;"
  >
    <span>版本信息：{{ titleStr }}</span>
    <span style="margin-left: 10px;color: red;" @click="showVersion">当前版本：{{versionCode}}</span>
  </div>
  <Dialog
      v-model="isShowVersion" title="版本说明" max-height="500px" width="760px"
      append-to-body="true">
      <VersionForm />
      <template #footer>
      <ElButton @click="isShowVersion = false">关闭</ElButton>
    </template>
  </Dialog>
</template>
